<template>
  <div class="page-wrapper"> <!-- 外层容器 -->
    <div class="shopping-cart">
      <h1 class="cart-title">购物车</h1>

      <div v-if="cartItems.length === 0" class="empty-cart">
        <p>你的购物车是空的。</p>
        <router-link to="/" class="shop-link">去购物</router-link>
      </div>

      <ul v-else class="cart-list">
        <li v-for="item in cartItems" :key="item.id" class="cart-item">
          <div class="item-image">
            <img :src="item.image" :alt="item.name">
          </div>
          <div class="item-details">
            <h2 class="item-name">{{ item.name }}</h2>
            <!-- <p class="item-price">价格: {{ item.price | currency }}</p> -->
            <p class="item-price">价格: {{ item.price }}</p>
            <div class="quantity-controls">
              <button @click="decreaseQuantity(item.id)">-</button>
              <span class="item-quantity">{{ item.quantity }}</span>
              <button @click="increaseQuantity(item.id)">+</button>
            </div>
          </div>
          <div class="remove-item">
            <button @click="removeFromCart(item.id)" class="remove-btn">移除</button>
          </div>
        </li>
      </ul>

      <div class="cart-summary">
        <!-- <p class="total-price">总价: {{ totalPrice | currency }}</p> -->
        <p class="total-price">总价: {{ totalPrice }}</p>
        <router-link to="/pay">
          <button class="checkout-btn" @click="checkout">结账</button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'ShoppingCart',
  setup() {
    const cartItems = ref([
      { id: 1, name: '商品1', price: 100, quantity: 1, image: 'https://via.placeholder.com/100x100' },
      { id: 2, name: '商品2', price: 200, quantity: 2, image: 'https://via.placeholder.com/100x100' },
      { id: 3, name: '商品3', price: 150, quantity: 1, image: 'https://via.placeholder.com/100x100' },
    ]);

    const totalPrice = computed(() => {
      return cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
    });

    function increaseQuantity(itemId) {
      const item = cartItems.value.find(i => i.id === itemId);
      if (item) {
        item.quantity++;
      }
    }

    function decreaseQuantity(itemId) {
      const item = cartItems.value.find(i => i.id === itemId);
      if (item && item.quantity > 1) {
        item.quantity--;
      }
    }

    function removeFromCart(itemId) {
      cartItems.value = cartItems.value.filter(item => item.id !== itemId);
    }

    function checkout() {
      // 实现结账逻辑
      // this.$router.push('/pay')
    }

    return {
      cartItems,
      totalPrice,
      increaseQuantity,
      decreaseQuantity,
      removeFromCart,
      checkout,
    };
  }
};
</script>

<style scoped>
/* 外层容器，填充整个页面，背景透明 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
  align-items: center;      /* 水平居中 */
  height: 100vh;            /* 使页面高度为视口高度 */
  background-color: transparent; /* 保持透明 */
  margin-top: 50px;         /* 设置顶部间距 */
}

/* 购物车容器 */
.shopping-cart {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  /* 高度自动适应内容，不使用flex-grow */
}

/* 标题样式 */
.cart-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

/* 空购物车的提示 */
.empty-cart {
  text-align: center;
  font-size: 16px;
  color: #888;
}

.shop-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.shop-link:hover {
  background-color: #0056b3;
}

/* 购物车商品列表 */
.cart-list {
  list-style: none;
  padding: 0;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.item-image {
  flex: 0 0 100px;
  text-align: center;
}

.item-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.item-details {
  flex: 1;
  margin-left: 20px;
}

.item-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.item-price {
  color: #e91e63;
  font-size: 16px;
}

.quantity-controls {
  display: flex;
  align-items: center;
}

.quantity-controls button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.quantity-controls button:hover {
  background-color: #0056b3;
}

.item-quantity {
  margin: 0 10px;
  font-size: 16px;
}

.remove-item {
  flex: 0 0 100px;
  text-align: right;
}

.remove-btn {
  padding: 5px 10px;
  background-color: #ff0000;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.remove-btn:hover {
  background-color: #cc0000;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 18px;
}

.total-price {
  font-weight: bold;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkout-btn:hover {
  background-color: #388e3c;
}

/* 去除a标签蓝字下划线 */
a{
  text-decoration: none;
  color: white;
}
</style>
